<?php $bodyClass = "upload" ; ?>
<?php require("../frame/frame_head_echo.php"); ?>

<div class="container system-container ppt-12 br-6">
	<h1>新建一个回声</h1>

	<form class="system-form upload" action="#">
		<div class="input-group">
			<label for="voice-name">回声名称</label>
			<input id="voice-name" class="system-input" type="text" placeholder="在此输入回声名称" />
			<p class="help-block">你的声音名称, 设置后可以随时更改<br />不可包含空格，不可包含 @ &lt; &gt; &amp; / " ' 等符号, 不可超过20个字符</p>
		</div>

		<div class="input-group">
			<label>回声作者</label>
			<div class="label-select">
				<label class="active"><input name="voice-author" type="radio" checked="checked" /> 我不是此回声的原创作者。作品的所有权利归原作者所有，若涉及版权，此回声可被删除。</label>
				<label><input name="voice-author" type="radio" /> 我是此回声的原创作者，拥有此作品的公开展示权利。</label>
			</div>
		</div>

		<div class="input-group upload-voice">
			<label>上传音频</label>
			<a class="btn ht btn-upload" href="#" rel="nofollow">点击此处上传</a>
			<p class="help-block">上传文件格式仅限：mp3, m4a ，单文件限200M内</p>
			<div class="ui-progress-bar">
				<div class="progress">
					<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;"></div>
				</div>
			</div>
			<div class="uploaded-voice-wp">
				<div class="uploaded-voice">
					<i class="icon icon-voice"></i>
					<b>文件名.mp3</b>
				</div>
				<span>上传成功</span>
				<span class="error">上传失败</span>
			</div>
			<a class="btn ht btn-reupload" href="#" rel="nofollow">重新上传</a>
		</div>

		<div class="input-group upload-voice">
			<label>上传封面</label>
			<a class="btn ht btn-upload" href="#" rel="nofollow">点击此处上传</a>
			<p class="help-block">支持文件类型：jpg, png, gif</p>
			<div class="ui-progress-bar">
				<div class="progress">
					<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;"></div>
				</div>
			</div>
			<div class="uploaded-voice-wp uploaded-cover-wp cf">
				<div class="uploaded-voice-cover fl">
					<img src="../images/page_images/voice_5.jpg" alt="voice-cover" />
				</div>
				<div class="fl">
					<span>上传成功</span>
					<span class="error">上传失败</span>
					<a class="btn ht btn-reupload" href="#" rel="nofollow">重新上传</a>
				</div>
			</div>
		</div>

		<div class="input-group">
			<label for="voice-intro">回声简介</label>
			<textarea name="voice-intro" id="voice-intro" class="system-input" rows="8" placeholder="为此回声添加更多简介补充，如歌词、相关信息等"></textarea>
			<div class="label-checkbox">
				<label class="active"><input type="checkbox" checked="checked" />同意<a href="#">《echo回声作品版权声明》</a></label>
			</div>
		</div>
		
		<a class="btn ht submit-btn" href="#" rel="nofollow">确认发布</a>
	</form>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		$('.label-select label').on('click',function() {
			$(this).addClass('active').siblings().removeClass('active');
		});
		$('.label-checkbox label').on('click',function() {
			$(this).addClass('active').siblings().removeClass('active');
		});
	});
</script>

<?php require("../frame/frame_foot.php"); ?>